<template>
    <div class="enterpriseindustry">
        <div class="ep_title">
            <span>{{title}}</span>
            <i class="el-icon-close" @click="closeSelect"></i>
        </div>
        <div class="ep_desc">
            <div class="epd_div">
                <el-input placeholder="输入关键字" style="width:400px" @keyup.enter.native="searchData" v-model="searchName"></el-input>
                <div class="search_div" @click="searchData">
                    <span>搜索</span>
                </div>
            </div>
        </div>
        <div class="ep_content">
            <div class="epc_div">
                <div class="epc_title">
                    <span>第一分类</span>
                </div>
                <div class="epc_main">
                    <template v-for="item in selectData">
                        <div class="epcm_div" v-show="item.showTitle" :class="{clickdiv:item.haveClick || item.selectStatus=='yes' || item.selectStatus=='normal'}" @click="selectFirst(item)">
                            <div class="epcmd_left">
                                <i class="iconfont icon-duoxuan_weixuanzhong" v-if="item.selectStatus=='no'" @click.stop="selectFirstData(item)"></i>
                                <i class="iconfont icon-banxuan" v-if="item.selectStatus=='normal'" style="color:#fc6c0b;" @click.stop="selectFirstData(item)"></i>
                                <i class="iconfont icon-xuanzhong2" v-if="item.selectStatus=='yes'" style="color:#fc6c0b;" @click.stop="selectFirstData(item)"></i>
                                <span>{{item.name}}</span>
                            </div>
                            <div class="epcmd_right" v-if="item.children">
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </template>
                    
                </div>
            </div>
            <div class="epc_div">
                <div class="epc_title">
                    <span>第二分类</span>
                </div>
                <div class="epc_main">
                    <template v-for="item in secondSelectData">
                        <div class="epcm_div" v-show="item.showTitle" :class="{clickdiv:item.haveClick || item.selectStatus=='yes' || item.selectStatus=='normal'}" @click="selectSecond(item)">
                            <div class="epcmd_left">
                                <i class="iconfont icon-duoxuan_weixuanzhong" v-if="item.selectStatus=='no'" @click.stop="selectSecondData(item)"></i>
                                <i class="iconfont icon-banxuan" v-if="item.selectStatus=='normal'" style="color:#fc6c0b;" @click.stop="selectSecondData(item)"></i>
                                <i class="iconfont icon-xuanzhong2" v-if="item.selectStatus=='yes'" style="color:#fc6c0b;" @click.stop="selectSecondData(item)"></i>
                                <span>{{item.name}}</span>
                            </div>
                            <div class="epcmd_right" v-if="item.children">
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="epc_div">
                <div class="epc_title">
                    <span>第三分类</span>
                </div>
                <div class="epc_main">
                    <template v-for="item in threeSelectData">
                        <div class="epcm_div" v-show="item.showTitle" :class="{clickdiv:item.haveClick || item.selectStatus=='yes' || item.selectStatus=='normal'}" @click="selectThree(item)">
                            <div class="epcmd_left">
                                <i class="iconfont icon-duoxuan_weixuanzhong" v-if="item.selectStatus=='no'" @click.stop="selectThree(item)"></i>
                                <i class="iconfont icon-banxuan" v-if="item.selectStatus=='normal'" style="color:#fc6c0b;" @click.stop="selectThree(item)"></i>
                                <i class="iconfont icon-xuanzhong2" v-if="item.selectStatus=='yes'" style="color:#fc6c0b;" @click.stop="selectThree(item)"></i>
                                <span>{{item.name}}</span>
                            </div>
                            <div class="epcmd_right" v-if="item.children">
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="ep_bottom">
            <div class="sd_div" @click="closeSelect">
                <span>取消</span>
            </div>
            <div class="search_div" @click="sureAdd">
                <span>确认</span>
            </div>
        </div>
    </div>
</template>
  
<script>
import homeapi from "@/api/api.js";
import until from "@/api/until.js";
export default {
    name: "enterpriseindustry",
    data() {
        return {
            selectData:[],
            secondSelectData:[],
            threeSelectData:[],
            searchName:"",

           
        };
    },
    props: {
        title:String,
        selectArry:Array,
        haveSelect:Array,
    },
    mounted() {
        this.selectData=this.checkData(JSON.parse(JSON.stringify(this.selectArry)))
        this.showData();
        console.log(this.haveSelect)
    },
    watch:{
        selectArry(){
            this.selectData=this.checkData(JSON.parse(JSON.stringify(this.selectArry)))
    
        }
    },
    methods: {
        //二次回显
        showData(){
            this.haveSelect.map(res=>{
                if(res.length==1){
                    for(let i =0;i<this.selectData.length;i++){
                        if(this.selectData[i].id==res[0]){
                            this.selectData[i].selectStatus='yes';
                            break;
                        }
                    }
                }
                if(res.length==2){
                    for(let i =0;i<this.selectData.length;i++){
                        let haveFind=false
                        if(this.selectData[i].id==res[0]){
                            if(this.selectData[i].children){
                                for(let j=0;j<this.selectData[i].children.length;j++){
                                    if(this.selectData[i].children[j].id==res[1]){
                                        this.selectSecondData(this.selectData[i].children[j])
                                        haveFind=true;
                                        break;
                                    }
                                }
                            }
                            if(haveFind){
                                break;
                            }
                        }
                        
                       
                    }
                }
                if(res.length==3){
                    for(let i =0;i<this.selectData.length;i++){
                        let haveFind=false
                        if(this.selectData[i].id==res[0]){
                            if(this.selectData[i].children){
                                for(let j=0;j<this.selectData[i].children.length;j++){
                                    if(this.selectData[i].children[j].id==res[1]){
                                        if(this.selectData[i].children[j].children){
                                            for(let k=0;k<this.selectData[i].children[j].children.length;k++){
                                                if(this.selectData[i].children[j].children[k].id==res[2]){
                                                    this.selectThree(this.selectData[i].children[j].children[k])
                                                    haveFind=true;
                                                    break;
                                                }
                                            }
                                        }
                                    }
                                    if(haveFind){
                                        break;
                                    }
                                }
                            }
                            if(haveFind){
                                break;
                            }
                        }
                        
                       
                    }
                }
            })
        },


        //搜索验证
        searchData(){
            let searchName=this.searchName;
            this.secondSelectData=[];
            this.threeSelectData=[];
            this.selectData.map(res=>{
                if(res.name.indexOf(searchName)>-1){
                    res.showTitle=true;
                    if(res.children){
                        res.children.map(json=>{
                            json.showTitle=true;
                            if(json.children){
                                json.children.map(item=>{
                                    item.showTitle=true;
                                })
                            }
                        })
                    }
                }
                else{
                    if(res.children){
                        let haveParent=0
                        res.children.map(json=>{
                            if(json.name.indexOf(searchName)>-1){ 
                                json.showTitle=true
                                haveParent=haveParent+1;
                                if(json.children){
                                    json.children.map(item=>{
                                        item.showTitle=true;
                                    })
                                }
                                if(this.secondSelectData.length==0){
                                    this.secondSelectData=res.children
                                }
                                
                            }
                            else{
                                if(json.children){
                                    let haveSecondParent=0
                                    json.children.map(item=>{
                                        if(item.name.indexOf(searchName)>-1){
                                            item.showTitle=true;
                                            haveSecondParent=haveSecondParent+1;
                                            haveParent=haveParent+1;
                                            if(this.secondSelectData.length==0 && this.threeSelectData.length==0){
                                                this.secondSelectData=res.children
                                                this.threeSelectData=json.children
                                            }
                                           
                                        }   
                                        else{
                                            item.showTitle=false
                                           
                                        }
                                        
                                    })
                                    if(haveSecondParent>0){
                                        json.showTitle=true;
                                    }
                                    else{
                                        json.showTitle=false
                                    }
                                }
                                else{
                                    
                                    json.showTitle=false
                                }
                            }
                        })
                        if(haveParent>0){
                            res.showTitle=true
                        }
                        else{
                            res.showTitle=false
                        }
                    }
                    else{
                        res.showTitle=false
                    }
                    
                }
            })
        },

        closeSelect(){
            this.$emit("closeSelect")
        },
        //确认添加
        sureAdd(){
            let arryList=[];
            let arryName=""
            this.selectData.map(res=>{
                if(res.selectStatus=='yes' || res.selectStatus=='normal'){

                    if(res.children){
                        res.children.map(json=>{
                            if(json.selectStatus=='yes' || json.selectStatus=='normal'){
                                if(json.children){
                                    json.children.map(item=>{
                                        if(item.selectStatus=='yes'){
                                            let arryItem=[res.id,json.id,item.id]
                                            arryList.push(arryItem)
                                            if(arryName==""){
                                                arryName=res.name+"/"+json.name+"/"+item.name
                                            }
                                            else{
                                                arryName+=','+res.name+"/"+json.name+"/"+item.name
                                            }
                                        }
                                    })
                                }
                                else{
                                     let arryItem=[res.id,json.id]
                                     arryList.push(arryItem)
                                     
                                    if(arryName==""){
                                        arryName=res.name+"/"+json.name
                                    }
                                    else{
                                        arryName+=','+res.name+"/"+json.name
                                    }
                                }
                            }
                        })
                    }
                    else{
                        let arryItem=[res.id]
                        if(arryName==""){
                            arryName=res.name
                        }
                        else{
                            arryName+=','+res.name
                        }
                       
                        arryList.push(arryItem)
                    }
                }
            })
            let jsonData={
                arryList:arryList,
                arryName:arryName
            }
            this.$emit("saveData",jsonData)
   
        },


        //验证首次选项
        checkData(data){
            data.map(res=>{
                res.haveClick=false
                res.selectStatus="no"
                res.showTitle=true
                if(res.children){
                    res.children.map(json=>{
                        json.haveClick=false
                        json.selectStatus="no"
                        json.showTitle=true
                        if(json.children){
                            json.children.map(item=>{
                                item.haveClick=false
                                item.selectStatus="no"
                                item.showTitle=true
                            })   
                        }
                    })
                }
            })
            return data
        },
        //点击第一列选项
        selectFirst(item){
            
            this.selectData.map(res=>{
                res.haveClick=false;
            })

            item.haveClick=true;
            if(item.children){
                this.secondSelectData=item.children
            }
            else{
                if(item.selectStatus=='yes'){
                    item.selectStatus='no'
                }
                else if(item.selectStatus=='no'){
                    item.selectStatus="yes"
                }
                
            }
           
        },
        //点击第一列选择框
        selectFirstData(item){
            if(item.children){
                if(item.selectStatus=='yes'){
                    item.selectStatus='no'
                    if(item.children){
                        item.children.map(res=>{
                            res.selectStatus='no'
                        })
                        if(res.children){
                            res.children.map(json=>{
                                json.selectStatus='no'
                            })
                        }
                    }
                }
                
                else if(item.selectStatus=='no'){
                    item.selectStatus='yes'
                    if(item.children){
                        item.children.map(res=>{
                            res.selectStatus='yes'
                            if(res.children){
                                res.children.map(json=>{
                                    json.selectStatus='yes'
                                })
                            }
                        })
                    }
                    this.selectFirst(item)
                }
                else if(item.selectStatus=='normal'){
                    item.selectStatus='yes'
                    if(item.children){
                        item.children.map(res=>{
                            res.selectStatus='yes'
                            if(res.children){
                                res.children.map(json=>{
                                    json.selectStatus='yes'
                                })
                            }
                        })
                    }
                    this.selectFirst(item)
                }
            }
            else{
                this.selectFirst(item)
            }
        },

        //点击第二列数据
        selectSecond(item){
            this.secondSelectData.map(res=>{
                res.haveClick=false
            })
            item.haveClick=true;
            if(item.children){
                this.threeSelectData=item.children
            }
            else{
                if(item.selectStatus=='yes'){
                    item.selectStatus='no'
                }
                else{
                    item.selectStatus='yes'
                }
                
                this.checkFirst(item)
            }
           
        },
        //点击第二列选择框
        selectSecondData(item){
            if(item.children){
                if(item.selectStatus=='no'){
                    item.selectStatus='yes'
                    item.children.map(res=>{
                        res.selectStatus='yes'
                    })
                    this.selectSecond(item)
                }
                else if(item.selectStatus=='yes'){
                    item.selectStatus='no'
                    item.children.map(res=>{
                        res.selectStatus='no'
                    })
                }
                else if(item.selectStatus=='normal'){
                    item.selectStatus='yes'
                    item.children.map(res=>{
                        res.selectStatus='yes'
                    })
                    this.selectSecond(item)
                }
                this.checkFirst(item)
            }
            else{
                this.selectSecond(item)
            }
        },
        //选择第三列
        selectThree(item){
            if(item.selectStatus=='yes'){
                item.selectStatus='no'
            }
            else{
                item.selectStatus='yes'
            }
            this.checkSecond(item)

        },
        //验证第二列分类的选择
        checkSecond(item){
            let nowSecond=null

            for(let i=0;i<this.selectData.length;i++){
                let haveFind=false
                if(this.selectData[i].children){
                    for(let j=0;j<this.selectData[i].children.length;j++){
                        if(this.selectData[i].children[j].id==item.pid){
                            nowSecond=this.selectData[i].children[j];
                            haveFind=true;
                            break;
                        }
                    }
                }
                if(haveFind){
                    break;
                }
            }
            let haveCheckNum=0;
            nowSecond.children.map(res=>{
                if(res.selectStatus=='yes'){
                    haveCheckNum=haveCheckNum+1;
                }
            })
            if(haveCheckNum==nowSecond.children.length){
                nowSecond.selectStatus='yes'
            }
             else if(haveCheckNum>0){
                nowSecond.selectStatus='normal'
            }
            else if(haveCheckNum==0){
                nowSecond.selectStatus='no'
            }
            this.checkFirst(nowSecond)
        },



        //验证第一列分类选择
        checkFirst(item){
            console.log(item)
            let nowFirst=null;
            for(let i =0;i<this.selectData.length;i++){
                if(this.selectData[i].id==item.pid){
                    nowFirst=this.selectData[i]
                    break;
                }
            }
            let haveCheckNum=0;
            let haveNormalNum=0;
            nowFirst.children.map(res=>{
                if(res.selectStatus=='yes'){
                    haveCheckNum=haveCheckNum+1;
                }
                if(res.selectStatus=='normal'){
                    haveNormalNum=haveNormalNum+1
                }
            })
            if(haveNormalNum==0){
                 if(haveCheckNum==nowFirst.children.length){
                    nowFirst.selectStatus='yes'
                }
                else if(haveCheckNum>0){
                    nowFirst.selectStatus='normal'
                }
                else if(haveCheckNum==0){
                    nowFirst.selectStatus='no'
                }
            }
            else{
                nowFirst.selectStatus='normal'
            }
           
      
        },

    },
}; 
</script>
<style scoped>
    .enterpriseindustry{
        width: 90%;
        height: 90vh;
        top: 3vh;
        position: fixed;
        left: 5%;
        z-index: 9999;
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        background: #ffffff;
        border-radius: 8px;
    }
    .ep_title{
        width: 100%;
        height: 45px;
        padding:0 30px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e6e6e6;
    }
    .ep_title i{
        font-size: 22px;
        color: #333333;
        cursor: pointer;
    }
    .ep_desc{
        width: 100%;
        padding-left: 30px;
        box-sizing: border-box;
        margin-top: 20px;
    }
    .epd_div{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .search_div{
        width: 120px;
        height: 40px;
        border-radius: 8px;
        background: #fc6c0b;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
        color: #ffffff;
        cursor: pointer;
    }
    .ep_content{
        width: calc(100% - 60px);
        margin-left: 30px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        height: calc(100% - 220px);
        margin-top: 20px;
    }
    .epc_div{
        flex: 1;
        height: 100%;
        overflow: auto;
        border: 1px solid #e6e6e6;
    }
    .epc_title{
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #e6e6e6;
        padding-left: 15px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 14px;
        color: #333333;
        font-weight: bold;
    }
    .epc_main{
        width: 100%;
        height: calc(100% - 40px);
        padding: 0 15px;
        box-sizing: border-box;
        overflow: auto;
    }
    .epcm_div{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 35px;
        cursor: pointer;

    }
    .epcm_div i{
        font-size: 16px;
        color: #333333;
    }
    .epcm_div span{
        font-size: 14px;
        color: #333333;
        margin-left: 5px;
    }
    .epcmd_left{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .epcmd_right i{
        font-size: 16px;
        color: #333333;
    }
    .clickdiv span{
        color: #fc6c0b;
    }
    .ep_bottom{
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 30px;
        box-sizing: border-box;
    }
    .sd_div{
        width: 120px;
        height: 40px;
        border-radius: 8px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
        color: #333333;
        border: 1px solid #e6e6e6;
        margin-right: 10px;
        cursor: pointer;
    }
</style>
  